<template>
  <el-card class="box-card-component">
    <div slot="header" class="box-card-header">
      <img class="card-img" :src="src" alt="" @click="goRecordDetail">
    </div>
    <div style="position:relative;">
      <blockquote class="blockquote">
        <h5 style="margin:0 0 .5rem;font-size: 15px">{{ title }}</h5>
        <div class="p-div">
          <p style="font-size: 13px;line-height: 1.6;margin-top: 0">{{ description }}</p>
        </div>
        <p style="float: right;color: #2a2a2a;font-size: 14px;margin: 10px 0;font-style:italic ">{{ '-- ' + nick }}</p>
      </blockquote>
    </div>
  </el-card>
</template>

<script>

import { loginMessage } from '@/utils/login-message'
import { getEmail } from '@/utils/auth'
import { validateTeamUser } from '@/api/team'

export default {
  props: {
    privilege: {
      type: Number,
      default: 0
    },
    teamId: {
      type: Number,
      default: -1
    },
    src: {
      type: String,
      default: 'https://wpimg.wallstcn.com/e7d23d71-cf19-4b90-a1cc-f56af8c0903d.png'
    },
    title: {
      type: String,
      default: 'Test'
    },
    nick: {
      type: String,
      default: 'Test'
    },
    description: {
      type: String,
      default: 'Test'
    }
  },
  methods: {
    goRecordDetail() {
      if (loginMessage()) {
        return
      }
      if (this.privilege === 1) {
        const form = new FormData()
        form.set('teamId', String(this.teamId))
        form.set('email', getEmail())
        validateTeamUser(form).then(res => {
          if (res.data) {
            this.$router.push({
              path: '/record/detail',
              query: { teamId: this.teamId }
            })
          } else {
            this.$message.warning(res.message)
          }
        })
      } else {
        this.$router.push({
          path: '/record/detail',
          query: { teamId: this.teamId }
        })
      }
    }
  }
}
</script>

<style lang="scss">
.box-card-component {
  .el-card__header {
    padding: 0px !important;
  }
}
</style>
<style lang="scss" scoped>
.card-img {
  cursor: pointer;
}

.p-div {
  overflow-y: scroll;
  width: auto;
  height: 100px;
}

.p-div::-webkit-scrollbar {
  width: 5px;
  height: 10px;
}

.p-div::-webkit-scrollbar-track {
  background: rgb(239, 239, 239);
  border-radius: 2px;
}

.p-div::-webkit-scrollbar-thumb {
  background: #bfbfbf;
  border-radius: 10px;
}

.p-div::-webkit-scrollbar-thumb:hover {
  background: #333;
}

.p-div::-webkit-scrollbar-corner {
  background: #179a16;
}

::v-deep .el-card__body {
  padding: 10px;
}

.blockquote {
  padding: 10px 10px;
  border-left: 4px solid #dee2e6;
  margin: 0 !important;
}

.box-card-component {
  .box-card-header {
    position: relative;
    max-height: 300px;
    overflow: hidden;

    img {
      width: 100%;
      height: 100%;
      transition: all 0.2s linear;

      &:hover {
        transform: scale(1.1, 1.1);
        filter: contrast(130%);
      }
    }
  }

  @media only screen and (max-width: 1510px) {
    .mallki-text {
      display: block;
    }
  }
}
</style>
